<template>
	<view class="input-box">
		<view class="label">
			<text :class="{required: required}">{{label}}</text>
			<text>:</text>
		</view>
		<input :class="['input', disabled ? 'disabled': '']" :type="type" :value="value" @input="onIpt" :disabled="disabled" />
		<view v-if="tip" class="input-tip">
			{{tip}}
		</view>
	</view>
</template>

<script>
	export default {
		name:"input-box",
		props: {
			label: {
				type: String
			},
			required: {
				type: Boolean,
				default: false
			},
			value: {
				type: String
			},
			type: {
				type: String,
				default: 'text'
			},
			tip: {
				type: String,
				default: ''
			},
			disabled: {
				type: Boolean,
				default: false
			}
		},
		data() {
			return {
				
			};
		},
		
		methods: {
			onIpt(e) {
				this.$emit('update:value', e.target.value)
			}
		}
	}
</script>

<style lang="less">
@import url('@/common/less/vars.less');

.input-box{
	color: @text-color;
	font-size: @main-font-size;
	margin-bottom: 14px;
	
	&>.label{
		margin-bottom: 6px;
	}
	
	&>.label >text:first-child.required::after{
		content: '*';
		color: @theme-color;
		font-size: @main-font-size;
	}
	
	&>.label >text:nth-child(2) {
		margin-left: 7.03rpx;
	}
	
	&>.input{
		box-sizing: border-box;
		width: 100%;
		height: 32px;
		border: solid 1px #bfbfbf;
		outline: none;
		padding-left: 16.4rpx;
		&.disabled{
			background-color: #efefef;
			border-color: #efefef;
			color: #9f9f9f;
		}
	}
	
	.input-tip{
		font-size: 12px;
		margin-top: 6px;
	}
}
</style>
